<template>
	<Layout :showBack="false" headerBg :histyle="{color:'#FFFFFF'}" tabbar :innerBottom="false">
		<template #title>个人中心</template>
		<view v-if="authStore.isLogin" class="iflex asc profile">
			<view class="profile__portrait aspect-fill">
				<image mode="aspectFill" :src="accountInfo.avatar"></image>
			</view>
			<view class="flex column jcsb profile__info">
				<view class="profile__info__name">{{accountInfo.nickname}}</view>
				<view class="profile__info__telephone">{{accountInfo.phoneNumber}}</view>
			</view>
			<view class="iflex  jcc profile__qrcode">
				<image src="/static/image/mine/qrcode.png" @click.stop="tapToMyNameCard"></image>
			</view>
		</view>

		<view v-else class="iflex asc profile">
			<u-button type="primary" @click="tapToLoginPage">未登录，请前去登录吧</u-button>
		</view>

		<view class="iflex asc account">
			<image class="account__bg" src="/static/image/mine/account.bg.png"></image>
			<view class="iflex fill aic jcsb account__info">
				<view class="iflex aic account__info__left">
					<text>账号余额：</text>
					<text class="rmb">¥{{pennyToDollarFormat(wallet.balanceFee)}}</text>
				</view>
				<view class="iflex aic jcc account__info__button" @click.stop="tapToWithdraw">去提现</view>
			</view>
		</view>

		<view class="iflex column asc distribution">
			<view class="iflex fill aic jcsb distribution__header">
				<text>我的分销</text>
				<view class="iflex aic jcc" @click.stop="tapToMyBrokerage">
					查看<image src="/static/image/other/arrow.png"></image>
				</view>
			</view>
			<view class="iflex fill distribution__statistics">
				<view class="iflex column aic jcsb distribution__statistics__item">
					<text>{{brokerageInfo.orderCount}}</text>
					<view>累计数量</view>
				</view>

				<view class="iflex column aic jcsb distribution__statistics__item">
					<text>{{brokerageInfo.newUserCount}}</text>
					<view>新增下级</view>
				</view>

				<view class="iflex column aic jcsb distribution__statistics__item">
					<text>{{brokerageInfo.userCount}}</text>
					<view>累计下级</view>
				</view>
			</view>

			<view class="iflex fill jcsb distribution__footer">
				<text>今日入账：¥{{pennyToDollarFormat(brokerageInfo.todayAmount)}}</text>
				<text>累计入账：¥{{pennyToDollarFormat(brokerageInfo.walletIncome)}}</text>
			</view>
		</view>

		<view v-if="authStore.isLogin" class="iflex asc aic jcc logout-button" @click.stop="tapShowLogout">退出</view>
	</Layout>
	<u-modal v-model="showLogout" :show-confirm-button="false" :show-title="false">
		<view class="iflex column fill logout-modal">
			<view class="iflex fill aic jcc logout-modal__content">确定退出登录吗？</view>
			<view class="iflex fill jcsb logout-modal__footer">
				<view class="iflex aic jcc logout-modal__footer__button" @click.stop="showLogout = false">取消</view>
				<view class="iflex aic jcc logout-modal__footer__button confirm" @click.stop="tapConfirmLogout">确定
				</view>
			</view>
		</view>
	</u-modal>
</template>

<script setup lang="ts">
	import { onShow } from '@dcloudio/uni-app';
	import { ref } from 'vue';
	import type { AnyObj } from '@/types/global';
	import { setTabbar } from '@/utils/wx';
	import { pennyToDollarFormat } from '@/utils/format';
	import { isLogin } from '@/utils/auth';
	import { getAccountInfo, getBrokerageInfo, logout } from '@/apis/auth';
	import { getWallet } from '@/apis/withdraw';
	import { useAuthStore } from '@/stores';

	setTabbar({ selected: 2 });
	const authStore = useAuthStore();
	const showLogout = ref(false);
	const accountInfo = ref<AnyObj>({});
	const wallet = ref<AnyObj>({});
	const brokerageInfo = ref<AnyObj>({});

	function loadData() {
		accountInfo.value = {};
		wallet.value = {};
		brokerageInfo.value = {};
		if (!isLogin()) return;
		getAccountInfo().then((res) => {
			accountInfo.value = res.data ?? {}
		});

		getWallet().then((res) => {
			wallet.value = res.data ?? {}
		});

		getBrokerageInfo().then((res) => {
			brokerageInfo.value = res.data ?? {}
		});
	}


	function tapShowLogout() {
		showLogout.value = true;
	}

	function tapConfirmLogout() {

		logout().then((res) => {
			if (res.code !== 200) {
				uni.showToast({
					icon: 'none',
					title: res.msg ?? '服务器忙，请稍后再试'
				});
				return;
			}
			uni.showToast({
				icon: 'none',
				title: '退出成功'
			});
			authStore.clearProfile();
			showLogout.value = false;
			setTimeout(() => {
				loadData();
			}, 500);
		});
	}

	function tapToMyBrokerage() {
		uni.navigateTo({
			url: '/pages-mine/my-brokerage/my-brokerage'
		})
	}

	function tapToMyNameCard() {
		uni.navigateTo({
			url: '/pages-mine/my-name-card/my-name-card'
		})
	}

	function tapToWithdraw() {
		uni.navigateTo({
			url: '/pages-mine/withdraw/withdraw'
		})
	}

	function tapToLoginPage() {
		uni.navigateTo({
			url: '/pages/login/login'
		})
	}



	onShow(() => {
		loadData();
	})
</script>

<style lang="scss">
	.profile {
		margin-top: 130rpx;
		width: 690rpx;
		padding: 56rpx 28rpx;
		border-radius: 12rpx;
		background: linear-gradient(88deg, #FFF 1.72%, #E6EAF5 109.9%);

		&__portrait {
			width: 136rpx;
			height: 136rpx;
			border-radius: 136rpx;
			border: 1px solid #FFF;
		}

		&__info {
			padding: 14rpx 34rpx;

			&__name {
				color: #000000;
				font-size: 40rpx;
				font-weight: 500;
			}

			&__telephone {
				color: #000000;
				font-size: 28rpx;
				font-weight: 400;
			}
		}


		&__qrcode {
			padding: 16rpx 0 32rpx 32rpx;

			image {
				width: 32rpx;
				height: 34rpx;
			}
		}
	}

	.account {
		margin-top: 60rpx;
		width: 690rpx;
		height: 217rpx;

		&__bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 690rpx;
			height: 217rpx;
		}

		&__info {
			position: relative;
			z-index: 1;
			height: 126rpx;
			padding: 20rpx 26rpx 0 26rpx;

			&__left {
				color: #ffffff;
				font-size: 26rpx;
				font-weight: 500;

				.rmb {
					font-size: 40rpx;
					font-weight: 600;
				}
			}

			&__button {
				width: 112rpx;
				height: 45rpx;
				border-radius: 22.5rpx;
				color: #ff710a;
				font-size: 28rpx;
				font-weight: 500;
				background-color: white;
			}
		}
	}

	.distribution {
		margin-top: -92rpx;
		padding: 0 22rpx;
		width: 690rpx;
		height: 328rpx;
		border-radius: 22rpx;
		background: #FFF;

		&__header {
			height: 92rpx;


			text {
				color: #000000;
				font-size: 28rpx;
				font-weight: 500;
			}

			view {
				color: #b2b2b2;
				font-size: 24rpx;
				font-weight: 400;

				image {
					margin-left: 5rpx;
					width: 32rpx;
					height: 32rpx;
				}
			}
		}

		&__statistics {
			height: 159rpx;
			border-top: 1px solid #d7d7d735;
			border-bottom: 1px solid #d7d7d735;

			&__item {
				width: 33.333333%;
				padding: 32rpx 0 24rpx 0;

				text {
					color: #000000;
					font-size: 40rpx;
					font-weight: 600;
				}
			}
		}

		&__footer {
			padding-top: 15rpx;
			color: #848484;
			font-size: 22rpx;
			font-weight: 400;
		}
	}

	.logout-button {
		margin-top: 60rpx;
		width: 690rpx;
		height: 100rpx;
		border-radius: 12rpx;
		background: #FFF;
		color: #000000;
		font-size: 28rpx;
		font-weight: 400;
	}

	.logout-modal {
		padding: 76rpx 40rpx 56rpx 40rpx;

		&__content {
			color: #101010;
			font-size: 36rpx;
			font-weight: 500;
		}

		&__footer {
			padding-top: 80rpx;

			&__button {
				width: 220rpx;
				height: 80rpx;
				border-radius: 12rpx;
				background: #F6F6F6;
				color: #757575;
				font-size: 32rpx;
				font-weight: 400;

				&.confirm {
					background: #FF710A;
					color: #FFFFFF;
				}
			}
		}
	}
</style>